<template>
	<view v-if="loading || error" class="loading_view">
		<u-loading mode="circle" v-if="loading" size="50"></u-loading>
		<u-toast ref="uToast" />
		<view class="messgae">{{ loading?'加载中...':'加载失败' }}</view>
	</view>
	<view v-else style="background-color: #EFEFEF;height: 100vh;overflow: auto;">
		<u-toast ref="uToast" />
		<view class="form_view">
			
			<view class="item_view">
				
				<view class="label_view">真实姓名:</view>
				<view class="input_view"><input v-model="formData.u_name" placeholder="请输入您的真实姓名" type="text"/></view>
				
			</view>
			
			<view class="item_view">
				
				<view class="label_view">最高学历:</view>
				<view class="input_view">
					<view @click="show=true" style="color: rgb(128,128,128);width: 500rpx;">{{ educationName!=''?educationName:'请点击选择您的最高学历' }}</view>
					<u-select @confirm="changeType" v-model="show" confirm-color="#EA4389" :list="list"></u-select>
				</view>
			</view>
			
			<view class="item_view">
				
				<view class="label_view">毕业院校:</view>
				<view class="input_view"><input  v-model="formData.u_school" placeholder="请输入毕业院校完整名称" type="text"/></view>
				
			</view>
			
		</view>
		
		<view class="teaching_box">
			<view class="title">学历证书照片：</view>
			<view class="photo_box">
				<view class="photo_view" @click="upload()">
					<view class="upload_loading" v-if="upload_status">
						<u-loading mode="circle"></u-loading>
						<view class="message">上传中...</view>
					</view>
					<image v-if="formData.u_certificate==''" src="http://wx.jianmeijiayuan.com/static/image/education.png"></image>
					<image v-else :src="formData.u_certificate"></image>
					<view class="message_view">请上传学历证书</view>
				</view>
				
			</view>
			
		</view>
		
		<view class="teaching_box" v-if="showStatus">
			<view class="title">状态：
				<text v-if="formData.u_status==-1" style="color:#FF9800;">审核拒绝</text>
				<text v-else-if="formData.u_status==-0" style="color:#FF9800;">待审核</text>
				<text v-else style="color: #1AA034;">审核通过</text>
			</view>
			<view class="title" v-if="formData.u_status==-1">拒绝原因：{{ formData.u_refuseMessage }}</view>
		</view>
		
		<view class="teaching_box">
			<view class="title" style="color:#EA4389;">注意事项：</view>
			<view class="content">
				学历认证成功后，用户的学历资料将无法再次更改，请直接认证最高学历，照片学历信息必须清晰可见。
			</view>
		</view>
		
		<view class="foot_btn" @click="submit()">{{ sub_status?'提交中...':'提交审核' }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showStatus:false,
				educationName:'',
				formData:{
					u_name:'',// 姓名
					u_highest_education:0,// 最高学历
					u_school:'',//毕业院校
					u_certificate:'',//学历证书照片
					u_status:0
				},
				show:false,
				list: [
					{
						value: '1',
						label: '高中'
					},
					{
						value: '2',
						label: '中专'
					},
					{
						value: '3',
						label: '大专'
					},
					{
						value: '4',
						label: '本科'
					},
					{
						value: '5',
						label: '硕士'
					},
					{
						value: '6',
						label: '博士'
					},
					{
						value: '7',
						label: '院士'
					}
					
				],
				educationName_list:['高中','中专','大专','本科','硕士','博士','院士'],
				upload_status:false,
				sub_status:false,
				loading:false,
				error:false
			}
		},
		methods: {
			getData(){
				
				this.loading = true
				
				let that = this
				
				that.$request({
					url:'/user/education',
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								
								if(res.data.data){
									
									that.showStatus = true
									
									that.formData = res.data.data
									
									that.educationName=that.educationName_list[that.formData.u_highest_education]
								}
								
							}else{
									
								that.$refs.uToast.show({
									title: res.data.msg,
									type:'error'
								})
								
								that.error = true
								
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙~',
								type:'error'
							})
							
							that.error = true
						}
					},
					fail(){
						that.$refs.uToast.show({
							title: '数据获取失败~',
							type:'error'
						})
						
						that.error = true
					},
					complete(){
						that.loading = false
					}
				})
			},
			changeType(data){
				this.formData.u_highest_education = data[0].value
				
				this.educationName = data[0].label
			},
			upload(){
				let that = this
				
				if(this.upload_status){
					return false
				}
				
				uni.chooseImage({
				    success: (chooseImageRes) => {
						this.upload_status=true
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        var uper = uni.uploadFile({
				            url: that.$upload, 
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								this.upload_status=false
				                let data = JSON.parse(uploadFileRes.data)
								
								if(data.code==1){
									
									this.formData.u_certificate = data.src
								}else{
									
									this.$refs.uToast.show({
										title: data.msg,
										type: 'error'
									})
									
								}
								
				            },
							fail(){
								
								this.$refs.uToast.show({
									title: '上传失败',
									type: 'error'
								})
								
								this.upload_status=false
							}
				        });
						
						uper.onProgressUpdate(function(res){
							// 进度条等于 上传到的进度
							// _self.percent = res.progress
							// console.log('上传进度' + res.progress)
							// console.log('已经上传的数据长度' + res.totalBytesSent)
							// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
						})
						
				    }
				});
				
			},
			submit(){
				if(this.sub_status){
					return false
				}
				
				if(this.formData.u_name==''){
					this.$refs.uToast.show({
						title: '请输入真实姓名'
					})
					return false
				}
				
				if(this.formData.u_highest_education==0){
					this.$refs.uToast.show({
						title: '请选择您的最高学历'
					})
					return false
				}
				
				if(this.formData.u_school==''){
					this.$refs.uToast.show({
						title: '请输入毕业院校名称'
					})
					return false
				}
				
				if(this.formData.u_certificate==''){
					this.$refs.uToast.show({
						title: '请上传学历证书照片'
					})
					return false
				}
				
				this.sub_status = true
				
				let that = this
				
				this.$request({
					url:'/user/education_save',
					data:that.formData,
					method:'post',
					success(res){
						if(res.statusCode==200){
							if(res.data.code==1){
								
								that.$refs.uToast.show({
									title: '提交成功',
									type:'success',
									url:'/pages/my_prove/my_prove'
								})
								
							}else{
								that.$refs.uToast.show({
									title: res.data.msg,
									type:'warning'
								})
							}
						}else{
							that.$refs.uToast.show({
								title: '网络繁忙',
								type:'warning'
							})
						}
						
					},
					fail(){
						that.$refs.uToast.show({
							title: '数据提交失败~',
							type:'warning'
						})
					},
					complete(){
						that.sub_status = false
					}
				})
				
			}
		},
		onLoad(){
			this.getData()
		}
	}
</script>

<style scoped>
	.foot_btn{
		background-color: #EA4389;
		color:#fff;
		width: 750rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		position: fixed;
		left:0;
		bottom: 0;
	}
	.form_view{
		width:750rpx;
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
		margin-top: 30rpx;
	}
	.form_view .item_view{
		width:750rpx;
		height: 100rpx;
		background-color: #fff;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		align-items: center;
	}
	.form_view .item_view .label_view{
		padding:0 30rpx;
	}
	.form_view .item_view .input_view input{
		font-size: 24rpx;
		width: 550rpx;
	}
	.teaching_box{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.teaching_box view.title{
		width: 670rpx;
		font-size: 32rpx;
		padding: 40rpx 0;
	}
	.photo_box{
		width:670rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.photo_box image{
		width:310rpx;
		height: 200rpx;
	}
	.photo_box view.photo_view{
		margin-top: 20rpx;
		position: relative;
	}
	.photo_box view.photo_view .upload_loading{
		width:310rpx;
		height: 210rpx;
		background-color: rgba(255,255,255,0.8);
		position: absolute;
		left:0;
		top:0;
		z-index:1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.photo_box view.photo_view .upload_loading .message{
		color:#888;
		margin-top: 15rpx;
	}
	.photo_box view.photo_view .message_view{
		width: 310rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #2B2B2B;
		color:#fff;
		font-size: 20rpx;
		text-align: center;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.teaching_box view.content{
		width: 670rpx;
		font-size: 26rpx;
		color:#888;
		text-indent: 52rpx;
		line-height: 40rpx;
	}
	.teaching_box view.content text{
		color:#EA4389;
	}
</style>
